import React, {useState} from 'react'
import {Row, Col} from 'antd'
import ImageOption from './ImageOption'
import Hover from './Hover'

export default ({title, options, answer, onNext}) => {
  const [wrongCount, setWrongCount] = useState(0)
  const [finished, setFinished] = useState(false)
  const increaseWrongCount = () => setWrongCount(pre => pre + 1)
  const onFinish = () => {
    setFinished(true)
  }
  const toNext = () => {
    onNext({wrongCount})
  }
  const {pic, speech} = options.find(({id}) => id === answer)
  return (
    <div style={{
      position: 'relative'
    }}>
      <div style={{
        textAlign: 'center', fontSize: 32,
        margin: 15
      }}>
        {title}
      </div>
      <Row gutter={8}>
        {options.map(({id, pic, speech}) => {
          return (
            <Col span={12} key={id}>
              <ImageOption pic={pic} uid={id}
                           answer={answer}
                           onWrong={increaseWrongCount}
                           onFinish={onFinish}/>
            </Col>
          )
        })}
      </Row>
      <Hover title={title} pic={pic} speech={speech}
             visible={finished}
            toNext={toNext}/>
    </div>
  )
}
